import * as React from 'react'
import { Checkbox } from 'antd/es';
import TwsReactMarkdownPreview from '../../common/markdown/MarkdownPreview'

export default class MultipleChoiceQuiz extends React.Component<any>{
    getCorrect(singleQuiz: any) {
        if (singleQuiz.isCorrect) {
            return '✅'
        } else if (singleQuiz.isCorrect === '') {
            return ''
        } else {
            return '❌'
        }
    }
    changeAnswer = (quizId: number, answer: Array<number>) => {
        this.props.modifyAnswer(quizId, answer.filter(s => !isNaN(s)).sort().join(','))
    }

    getValue(quiz: any) {
        if (quiz.userAnswer) {
            return quiz.userAnswer.split(',').map((answer:string) => parseInt(answer, 10))
        }
        return []
    }
    render() {
        const { index, quiz } = this.props
        let { description } = quiz
        const status = quiz.answer
        const answer = `${this.getCorrect(quiz)}`

        return <div className='markdown-wrap'>
            <TwsReactMarkdownPreview source={`${index + 1}. ${description}`} />
            <div className='margin-t-1'>
                <Checkbox.Group
                    onChange={(answers:any) => this.changeAnswer(quiz.id, answers)}
                    defaultValue={this.getValue(quiz)}
                    disabled={!!status}>
                    {
                        quiz.choices.map((option:any, index:number) => {
                            return <Checkbox className='margin-l-1 radio-style' key={index} value={index}>
                                {option.choice}
                            </Checkbox>
                        })
                    }
                </Checkbox.Group>
                {status ? <TwsReactMarkdownPreview source={answer} /> : ''}
            </div>
        </div>
    }
}